<template>
  <div class="register">
    <!-- ============================  头部 =========================== -->
    <Header></Header> <!-- end navbar-inverse-blue -->

    <div class="grid_3">
      <div class="container">
        <div class="breadcrumb1">
          <ul>
            <router-link to="/">
              <i class="fa fa-home home_1">

              </i></router-link>
            <span class="divider">&nbsp;|&nbsp;</span>
            <li class="current-page"><font style="vertical-align: inherit;">
              <font style="vertical-align: inherit;">常规搜索</font></font></li></ul></div>
        <div class="col-md-9 search_left">

            <div class="form_but1">
              <label for="sex" class="col-sm-5 control-lable1">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;">昵称： </font>
                </font>
              </label>
              <div class="select-block1">
                <div class="col-sm-5 input-group1">
                  <input placeholder="请输入您的昵称" type="text" v-model="nickname" required="required" class="form-control has-dark-background">
                </div>
                <div class="clearfix">

                </div>
              </div>
              <div class="clearfix">

              </div>
            </div>

            <div class="form_but1">
              <label for="sex" class="col-sm-5 control-lable1">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;">密码： </font>
                </font>
              </label>
              <div class="select-block1">
                <div class="col-sm-5 input-group1">
                  <input placeholder="请输入您的密码" type="password" v-model="password" required="required" class="form-control has-dark-background" style="height:32px">
                </div>
                <div class="clearfix">

                </div>
              </div>
              <div class="clearfix">

              </div>
            </div>
            <!-- 性别 -->
            <div class="form_but1">
              <label for="sex" class="col-sm-5 control-lable1">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;">性别 ： </font>
                </font>
              </label>
              <div class="radio-box" v-for="(item,index) in sex_list" :key="item.id" style="margin-left:15px;">
                <input v-model="gender" :value="item.value" class="radio_1" type="radio" required="required">

                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;"> {{item.label}} &nbsp;&nbsp;
                  </font></font>
              </div>
              <div class="clearfix">

              </div>
            </div>

            <!-- 婚姻状况 -->
            <div class="form_but1">
              <label for="sex" class="col-sm-5 control-lable1">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;">婚姻状况 ： </font>
                </font>
              </label>
              <div class="radio-box" v-for="(item,index) in state_list" :key="item.id" style="margin-left:15px;">
                <input v-model="state" :value="item.value" class="radio_1" type="radio" required="required">

                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;"> {{item.label}} &nbsp;&nbsp;
                  </font></font>
              </div>
              <div class="clearfix">

              </div>
            </div>
            <!-- 地区 -->
            <div class="form_but1">
              <label for="sex" class="col-sm-5 control-lable1">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;">地区/城市： </font>
                </font></label>
              <div class="col-sm-7 form_radios">
                <div>
                  <v-distpicker @selected="onSelected"></v-distpicker>
                </div>
              </div>
              <div class="clearfix">
              </div>
            </div>
            <!-- 身高 -->
            <div class="form_but1">
              <label for="sex" class="col-sm-5 control-lable1">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;">身高： </font>
                </font>
              </label>
              <div class="col-sm-7 form_radios"><div class="select-block1">
                <select v-model="heig">
                 <option :value="value" v-for="value in heig_list">
                  <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">{{value}}</font>
                  </font>
                </option>
                </select>
              </div>
              </div>
              <div class="clearfix">

              </div>
            </div>
             <!-- 学历 -->
            <div class="form_but1">
              <label for="sex" class="col-sm-5 control-lable1">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;">学历： </font>
                </font>
              </label>
              <div class="col-sm-7 form_radios"><div class="select-block1">
                <select v-model="edu">
                 <option :value="value" v-for="value in edu_list">
                  <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">{{value}}</font>
                  </font>
                </option>
                </select>
              </div>
              </div>
              <div class="clearfix">

              </div>
            </div>
            <!-- 职业 -->
            <div class="form_but1">
              <label for="sex" class="col-sm-5 control-lable1">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;">职业： </font>
                </font>
              </label>
              <div class="col-sm-7 form_radios"><div class="select-block1">
                <select v-model="occ">
                  <option :value="value" v-for="value in occ_list">
                    <font style="vertical-align: inherit;">
                      <font style="vertical-align: inherit;">{{value}}</font>
                    </font>
                  </option> 

                </select>
              </div>
              </div>
              <div class="clearfix">

              </div>
            </div>
            <!-- 月收入 -->
            <div class="form_but1">
              <label for="sex" class="col-sm-5 control-lable1">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;">月收入： </font>
                </font>
              </label>
              <div class="col-sm-7 form_radios"><div class="select-block1">
                <select v-model="income">
                  <option :value="value" v-for="value in income_list">
                    <font style="vertical-align: inherit;">
                      <font style="vertical-align: inherit;">{{value}}</font>
                    </font>
                  </option>

                </select>
              </div>
              </div>
              <div class="clearfix">

              </div>
            </div>
            <!-- 年龄 -->
            <div class="form_but1">
              <label for="sex" class="col-sm-5 control-lable1">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;">年龄： </font>
                </font>
              </label>
              <div class="select-block1">
                <div class="col-sm-5 input-group1">
                  <input name="28" id="slider-name" placeholder="年龄" type="text" required="required" class="form-control has-dark-background" v-model="age">
                </div>
                <div class="clearfix">

                </div>
              </div>
              <div class="clearfix">

              </div>
            </div>
            <!-- 邮箱 -->
            <div class="form_but1">
              <label for="sex" class="col-sm-5 control-lable1">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;">邮箱： </font>
                </font>
              </label>
              <div class="select-block1">
                <div class="col-sm-5 input-group1">
                  <input   placeholder="请输入您的邮箱" type="email" required="required" class="form-control has-dark-background" style="height:32px" v-model="emile" @blur="ify_emile">
                </div>
                <div class="clearfix">
                    <p style="float: left;margin-top: 6px; color:red;" v-show="emile_isok">邮箱格式有误</p>
                </div>
              </div>
              <div class="clearfix">

              </div>
            </div>
            <!-- 验证码 -->
            <div class="form_but1">
              <label for="sex" class="col-sm-5 control-lable1">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;">验证码： </font>
                </font>
              </label>
              <div class="select-block1">
                <div class="col-sm-5 input-group1">
                  <input placeholder="请输入验证码" type="text" required="required" class="form-control has-dark-background" v-model="code" @blur="ify_code">
                </div>
                <div class="clearfix">
                  <p><a style="float: left;margin-top: 10px; cursor:pointer;" @click="get_code">获取验证码</a></p>
                </div>
              </div>
              <div class="clearfix">

              </div>
            </div>
            <div class="form-actions"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><input type="button" id="edit-submit" name="op" value="注册" class="btn_1 submit" @click="sub"></font></font></div>

        </div>
      </div>
    </div>

    <!-- ===========================  尾部 =========================== -->
    <Footer></Footer>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  name: "register",
  data() {
    return {
      nickname:'',
      password:'',
      gender:'',//性别
      state:'',//婚姻状态
      edu:'',//学历
      site:'',//地区
      occ:'',//职业
      income:'',//月收入
      heig:'',//身高
      age:'',//年龄
      code:'',//验证码
      emile:'',
      is_ok:false,
      emile_isok:false,
      sex_list:[
        {
          label: '男',
          value:1,
        },
        {
          label: '女',
          value:2,
        }
      ],
      state_list:[
        {
          label: '离婚',
          value:1,
        },
        {
          label: '未婚',
          value:2,
        },
        {
          label: '丧偶',
          value:3,
        }
      ],
      
      occ_list:[
        '程序员','市场/销售','医生','律师','教师','文员/秘书','行政人员','高层管理','公务员','机关干部','军人',
        '警察','消防员','工程师','职业经理人','咨询师','会计师','审计师','经纪人','预算员','检验员','体育工作者',
        '水电工','厨师','司机','美容化妆师','音乐家','画家','模特','演艺人员','教练','讲师','教授',
        '幼师','设计师','策划推广','客服人员','空姐','护士','服务员','营业员','导游','编辑/记者','摄影师','翻译',
        '学生','农民','自由职业','待业',
      ],
      
      income_list:[
        3000,4000,5000,6000,7000,8000,9000,'1万~2万','2万~5万','5万~10万','10万以上'
      ],
      heig_list:[
        150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,
        171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,
        191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,
      ],
      edu_list:[
        '小学','初中','高中','专科','本科','硕士','博士',
      ]
    };
  },
  methods: {
    onSelected(data){
      this.site=data.province.value +''+data.city.value+''+data.area.value
      console.log(this.site)
    },
    get_code(){
      if(this.emile==''){
        alert('请填写邮箱验证')
        return
      }
      let form = new FormData()
      form.append('emile',this.emile)
      axios({
        url:this.$api+'api/user/sendemile/',
        method:'post',
        data:form,
      }).then((res)=>{
        alert(res.data.message)
      })
    },
    ify_code(){
      if(this.code==''){
        return
      }
      let form = new FormData()
      form.append('emile',this.emile)
      form.append('code',this.code)
      axios({
        url:this.$api+'api/user/ify_code/',
        method:'post',
        data:form
      }).then((res)=>{
        alert(res.data.message)
        this.is_ok=true
      })
    },
    ify_emile(){
      if(this.emile==''){
        return
      }
      let reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if(!reg.test(this.emile)){
        this.emile_isok=true
      }else{
        this.emile_isok=false
      }
    },
    sub(){
      console.log(this.heig,'111')
      if(this.is_ok==false){
        alert('验证码未通过')
        return
      }
      if(this.nickname==''){
        alert('请输入昵称')
        return
      }
      if(this.password==''){
        alert('请输入密码')
        return
      }
      if(this.gender==''){
        alert('请填写性别')
        return
      }
      if(this.state==''){
        alert('请填写婚姻状况')
        return
      }
      if(this.site==''){
        alert('请填写地区')
        return
      }
      if(this.heig==0){
        alert('请选取身高')
        return
      }
      if(this.edu==''){
        alert('请填写学历')
        return
      }
      if(this.occ==''){
        alert('请填写职业')
        return
      }
      if(this.income==''){
        alert('请填写月收入')
        return
      }
      if(this.age==''){
        alert('请填写年龄')
        return
      }
      if(this.emile==''){
        alert('请填写邮箱')
        return
      }
      if(this.age==''){
        alert('请填写年龄')
        return
      }
      if(this.is_ok==false){
        alert('请填写正确验证码')
        return
      }
      let form = new FormData()
      form.append('nickname',this.nickname)
      form.append('state',this.state)
      form.append('password',this.password)
      form.append('gender',this.gender)
      form.append('age',this.age)
      form.append('site',this.site)
      form.append('height',this.heig)
      form.append('edu',this.edu)
      form.append('occ',this.occ)
      form.append('income',this.income)
      form.append('emile',this.emile)
      axios({
        url:this.$api+'api/user/register/',
        method:'post',
        data:form
      }).then((res)=>{
        alert(res.data.message)
        if(res.data.code==0){
          this.$router.push({name:'Login'})
        }
      })
    },

  }
};
</script>
